<template>
  <el-form ref="refForm" :model="formValue" v-bind="formPropSheet">
    <div style="padding: 20px 20px 0">
      <el-row
        v-bind="row.rowPropSheet"
        v-for="(row, index) in config"
        :key="index"
      >
        <template v-for="(item, i) in row.colConfig">
          <el-col
            class="re"
            v-bind="item.colPropSheet"
            v-if="!item.hide"
            :key="i"
          >
            <el-form-item v-bind="item.formItemPropSheet">
              <template v-if="item.type == 'ElInput'">
                <el-input
                  @change="
                    item.changeType
                      ? changeHandle(formValue[item.name], item.changeType)
                      : () => {}
                  "
                  v-bind="item.formControlPropSheet"
                  v-model="formValue[item.name]"
                ></el-input>
              </template>
              <template v-if="item.type == 'ElSelect'">
                <el-select
                  @change="
                    item.changeType
                      ? changeHandle(formValue[item.name], item.changeType)
                      : () => {}
                  "
                  v-bind="item.formControlPropSheet"
                  v-model="formValue[item.name]"
                >
                  <el-option
                    v-for="(op, opIndex) in item.options"
                    :key="opIndex"
                    :label="op.label"
                    :value="op.value"
                  ></el-option>
                </el-select>
              </template>
              <template v-if="item.type == 'ElInputNumber'">
                <el-input-number
                  v-model="formValue[item.name]"
                  v-bind="item.formControlPropSheet"
                  @change="
                    item.changeType
                      ? changeHandle(formValue[item.name], item.changeType)
                      : () => {}
                  "
                />
              </template>
              <template v-if="item.type == 'ElDatePicker'">
                <el-date-picker
                  v-model="formValue[item.name]"
                  v-bind="item.formControlPropSheet"
                  @change="
                    item.changeType
                      ? changeHandle(formValue[item.name], item.changeType)
                      : () => {}
                  "
                />
              </template>
              <template v-if="item.type == 'ElTimePicker'">
                <el-time-picker
                  v-model="formValue[item.name]"
                  v-bind="item.formControlPropSheet"
                  @change="
                    item.changeType
                      ? changeHandle(formValue[item.name], item.changeType)
                      : () => {}
                  "
                />
              </template>
              <template v-if="item.type == 'ElCascader'">
                <el-cascader
                  v-model="formValue[item.name]"
                  v-bind="item.formControlPropSheet"
                  @change="
                    item.changeType
                      ? changeHandle(formValue[item.name], item.changeType)
                      : () => {}
                  "
                />
              </template>
              <template v-if="item.type == 'custom'">
                <component
                  :is="item.templateName"
                  v-model="formValue[item.name]"
                  style="width: 100%"
                ></component>
              </template>
            </el-form-item>
            <div
              v-if="item.tips"
              class="ab"
              style="right: -6px; top: 8px; color: #aaa; cursor: pointer"
            >
              <el-popover
                placement="top-start"
                :width="200"
                trigger="hover"
              >
                <template #reference>
                  <el-icon><QuestionFilled /></el-icon>
                </template>
                <div v-html="item.tips.content"></div>
              </el-popover>
            </div>
          </el-col>
        </template>
      </el-row>
    </div>
  </el-form>
</template>
<style lang="scss" scoped>
::v-deep .el-select {
  width: 100%;
}
::v-deep .el-input-number {
  width: 100%;
}
::v-deep .el-date-editor {
  width: 100%;
}
::v-deep .el-cascader {
  width: 100%;
}
::v-deep .el-row {
  &:last-of-type {
    margin-bottom: 0px;
  }
}
</style>
<script lang="ts" setup>
import { ref } from "vue";
import type { FormInstance } from "element-plus";
import { QuestionFilled } from "@element-plus/icons-vue";
interface IObj {
  [key: string]: any;
}
type PropsType = {
  formValue: IObj;
  formPropSheet: Object;
  config: Array<IObj>;
};
const props = defineProps<PropsType>();
const emit = defineEmits(["changeItem"]);
const changeHandle = (val: any, emitType: string) => {
  emit("changeItem", { val, emitType });
};
const refForm = ref<FormInstance>();
const submitForm = async (formEl: FormInstance | undefined) => {
  console.log("formEl", formEl);
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
defineExpose({ refForm, submitForm, resetForm });
</script>
